<template>
  <view class="fu-submit-bar" :class="{ 'is-fixed': fixed }">
    <!-- 左侧图标区域 -->
    <view class="fu-submit-bar__icons">
      <view 
        v-for="(icon, index) in icons" 
        :key="index"
        class="fu-submit-bar__icon"
        @tap="onIconClick(icon)"
      >
        <fu-icon :name="icon.name" size="40" :color="icon.color || '#666'"></fu-icon>
        <text class="fu-submit-bar__icon-text">{{ icon.text }}</text>
        <!-- 徽标 -->
        <view 
          v-if="icon.badge" 
          class="fu-submit-bar__icon-badge"
        >{{ icon.badge }}</view>
      </view>
    </view>
    
    <!-- 右侧按钮区域 -->
    <view class="fu-submit-bar__buttons">
      <!-- 辅助按钮 -->
      <view 
        v-if="showSecondaryButton"
        class="fu-submit-bar__btn fu-submit-bar__btn--secondary"
        :class="{ 'is-disabled': disabled }"
        @tap="onSecondaryClick"
      >
        {{ secondaryText }}
      </view>
      
      <!-- 主按钮 -->
      <view 
        class="fu-submit-bar__btn fu-submit-bar__btn--primary"
        :class="{ 'is-disabled': disabled }"
        @tap="onSubmit"
      >
        {{ buttonText }}
      </view>
    </view>
  </view>
</template>

<script>
/**
 * @description 提交订单栏组件
 * @property {Array} icons 图标配置数组
 * @property {String} buttonText 按钮文字
 * @property {String} secondaryText 辅助按钮文字
 * @property {Boolean} disabled 是否禁用
 * @property {Boolean} fixed 是否固定在底部
 * @property {Boolean} showSecondaryButton 是否显示辅助按钮
 * @event {Function} submit 点击提交按钮时触发
 * @event {Function} secondary-click 点击辅助按钮时触发
 * @event {Function} icon-click 点击图标时触发
 */
export default {
  name: 'FuSubmitBar',
  
  props: {
    // 图标配置数组
    icons: {
      type: Array,
      default: () => []
    },
    // 按钮文字
    buttonText: {
      type: String,
      default: '提交订单'
    },
    // 辅助按钮文字
    secondaryText: {
      type: String,
      default: '加入购物车'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否固定在底部
    fixed: {
      type: Boolean,
      default: false
    },
    // 是否显示辅助按钮
    showSecondaryButton: {
      type: Boolean,
      default: false
    }
  },
  
  methods: {
    // 点击提交按钮
    onSubmit() {
      if (this.disabled) return
      this.$emit('submit')
    },
    
    // 点击辅助按钮
    onSecondaryClick() {
      if (this.disabled) return
      this.$emit('secondary-click')
    },
    
    // 点击图标
    onIconClick(icon) {
      this.$emit('icon-click', icon)
    }
  }
}
</script>

<style lang="scss">
.fu-submit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120rpx;
  padding: 0 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  // 固定底部
  &.is-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    height: calc(120rpx + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  &__icons {
    display: flex;
    align-items: center;
    gap: 40rpx;
  }
  
  &__icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    &-text {
      font-size: 20rpx;
      color: #666;
      margin-top: 4rpx;
    }
    
    &-badge {
      position: absolute;
      top: -8rpx;
      right: -12rpx;
      min-width: 32rpx;
      height: 32rpx;
      padding: 0 8rpx;
      border-radius: 16rpx;
      background-color: #ff4444;
      color: #fff;
      font-size: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__buttons {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
  
  &__btn {
    height: 72rpx;
    padding: 0 40rpx;
    border-radius: 36rpx;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    
    &--secondary {
      background-color: #fff0f0;
      color: #ff4444;
    }
    
    &--primary {
      background: linear-gradient(135deg, #ff4444, #ff1111);
      color: #fff;
    }
    
    &.is-disabled {
      opacity: 0.5;
    }
    
    &:active {
      opacity: 0.8;
    }
  }
}
</style> 